<template>
	<view class="item">
		<!-- 任务主体内容区域 左右布局-->
		<view class="content">
			<!-- 左侧任务信息 -->
			<view class="cover">
				<image class="img"
					src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1851283359,3457678391&fm=26&gp=0.jpg">
				</image>
			</view>
			<!-- 右侧任务信息 -->
			<view class="info">
				<!-- 任务摘要 -->
				<view class="abstract">
					那是一个平静的一天，两狗撞在了一起，互相望着对方，就这样，这两条doge陷入了爱情之中，很快的，他们成了亲，生了孩子，可是这个孩子却并不如他们所愿，他是一条特殊的doge，叫cheems，cheems因为长相怪异，在幼儿园里受尽同学的排挤，他们称cheems为怪物，怪胎，都躲得他远远的，回了家，家里也并不是那么美好，父亲和母亲日复一日的吵架，cheems待在床上，无法忍受的哭了出来，到了课上，cheems也因为自己学习能力太差被同学嘲笑，接着，他的父亲在一天去上班的路上时，遭遇了车祸，不幸身亡，cheems看着面前的墓碑，听着身边的冷嘲热讽，再也哭不出来，因为他的眼泪早就哭干了，即使再哭也没有用啊
				</view>
				<view class="tips">
					<view class="">
						<u-button type="primary" text="领取任务" size="mini" :customStyle="customStyles">
						</u-button>
					</view>
					<view class="data">2022-1-20</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyles: {
					width: '70px',
				}
			};
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 30rpx;
		border-top: 2rpx solid #F5F5F5;

		.content {
			display: flex;
			justify-content: space-between;

			.cover {
				width: 140rpx;
				height: 154rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
				}
			}

			.info {
				width: calc(100% - 160rpx);

				.abstract {
					text-indent: 2em;
					color: $bsin-abstract;
					@include text-ellipsis(3);
				}

				.tips {
					display: flex;
					justify-content: space-between;
					align-items:center;
					margin-top: 14rpx;
					
					.data{
						color:$bsin-color-data;
					}
				}
			}
		}
	}
</style>
